<template>
  <vue-scroll>
    <div class='material'>
      <el-input size='mini'
                placeholder="请输入内容"
                v-model="searchData"
                class="input-with-select">
        <el-button slot="append"
                   icon="el-icon-search"
                   @click="handleSearch"></el-button>
      </el-input>
      <div class="pageTop">
        <el-card class="box-card">
          <div v-for="(item,index) in pageList"
               :key="item.subclassfolderid"
               class=" item">
            <el-row class="rowStyle"
                    @click.native="addMaterial(index)">
              <el-col :span="20">
                <!-- <img class="materialImg" src="/static/other/u184.png"> -->
                <span class="materialTitle">{{item.subclassfoldername}}</span>
              </el-col>
              <el-col :span="4"
                      style="text-align:right;">
                <p class="el-icon-check selectMaterial"
                   ref="selectMaterial"></p>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </div>
    </div>
  </vue-scroll>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
const { mapMutations } = createNamespacedHelpers('charts')
export default {
  name: 'materialPage',
  data () {
    return {
      searchData: '',
      pageList: [],
      oldPageList: [],
      statSourceIds: []
    }
  },
  methods: {
    handleSearch () {
      let arr = []
      for (let i in this.oldPageList) {
        let index = this.oldPageList[i].subclassfoldername.indexOf(
          this.searchData
        )
        if (index !== -1) {
          arr.push(this.oldPageList[i])
        }
      }
      this.pageList = arr
    },
    addMaterial (index) {
      let dom = this.$refs.selectMaterial[index]
      if (dom.style.color === 'rgb(93, 180, 49)') {
        dom.style.color = '#606266'
        let idd = this.statSourceIds.findIndex(
          item => item === this.pageList[index].subclassfolderid
        )
        this.statSourceIds.splice(idd, 1)
      } else {
        dom.style.color = 'rgb(93, 180, 49)'
        this.statSourceIds.push(this.pageList[index].subclassfolderid)
      }
      this.setFormData({ data: { statSourceId: this.statSourceIds } })
    },
    ...mapMutations(['setFormData'])
  },
  mounted () {
    let id = ''
    if (JSON.parse(localStorage.getItem('userlist'))) {
      id = JSON.parse(localStorage.getItem('userlist')).id
    }
    this.$axios
      .post('/subclassfolder/getFolderList', { userId: id })
      .then(res => {
        if (res.status === 200) {
          let result = res.data.result
          if (res.data.message === '成功') {
            this.pageList = result
            this.oldPageList = result
          }
        }
      })
  }
}
</script>

<style lang="less" scoped>
.pageTop {
  margin-top: 20px;
}
.material {
  max-height: 500px;
}
.selectMaterial {
  font-size: 20px;
  font-weight: bold;
}
.rowStyle {
  line-height: 40px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}
.rowStyle:hover {
  background-color: #eee;
}
.materialTitle {
  background-image: url(/static/other/u184.png);
  padding-left: 35px;
  background-size: contain;
  background-repeat: no-repeat;
  font-size: 14px;
}
</style>
